<template>
    <div class="register-page">
     <p style="font-size: 30px; margin-top: 15px; font-weight: bold; color: #ffaad5;">花店注册</p>
      <form @submit.prevent="register">
        <div class="form-group">
          <label for="newUsername">用户名：</label>
          <input type="text" id="newUsername" v-model="newUsername" style="width: 300px;"> 
        </div>
        <div class="form-group">
          <label for="newPassword">密码：</label>
          <input type="password" id="newPassword" v-model="newPassword" style="width: 300px;">
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码：</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" style="width: 300px;">
        </div>
        <button type="submit"><router-link to="/Users" >注册</router-link></button>
      </form>
      <p>已有账号？<router-link to="/login" >登录</router-link></p >
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newUsername: '瑜归',
        newPassword: '13251',
        confirmPassword: '13251',
      };
    },
    methods: {
      register() {
       
        console.log('尝试注册：', this.newUsername, this.newPassword);
       
      },
      goToLogin() {
        this.$router.push('/login');
      },
    },
  };
  </script>
  
  <style scoped>
  .register-page {
    padding: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    font-weight: bold;
  }
  input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  </style>